<template>
  <div class="app-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="back-button" @click="goBack">
          <i class="el-icon-arrow-left"></i>
          <span>返回列表</span>
        </div>
        <h2 class="title">{{ termName }}</h2>
      </div>
    </div>

    <!-- 计划概览卡片 -->
    <el-row :gutter="20" class="overview-section">
      <el-col :span="8">
        <el-card shadow="hover" class="overview-card total">
          <div class="card-content">
            <i class="el-icon-document"></i>
            <div class="info">
              <div class="label">总计划数</div>
              <div class="value">{{ planList.length }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="overview-card ongoing">
          <div class="card-content">
            <i class="el-icon-loading"></i>
            <div class="info">
              <div class="label">进行中</div>
              <div class="value">{{ getOngoingCount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="overview-card completed">
          <div class="card-content">
            <i class="el-icon-check"></i>
            <div class="info">
              <div class="label">已完成</div>
              <div class="value">{{ getCompletedCount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 时间线展示区 -->
    <el-card class="timeline-card" shadow="hover">
      <div slot="header" class="card-header">
        <span>训练计划进度</span>
        <el-button type="primary" size="small" @click="handleAddPlan">
          <i class="el-icon-plus"></i> 添加计划
        </el-button>
      </div>
      
      <el-timeline>
        <el-timeline-item
          v-for="(plan, index) in planList"
          :key="index"
          :timestamp="plan.startTime + ' 至 ' + plan.endTime"
          :type="getTimelineItemType(plan.status)"
          size="large"
        >
          <el-card class="plan-card" :class="{'completed-plan': plan.status === 0}">
            <div class="plan-header">
              <h3>{{ plan.name }}</h3>
              <el-tag :type="getPlanStatusType(plan.status)">
                {{ getPlanStatusLabel(plan.status) }}
              </el-tag>
            </div>
            
            <div class="plan-content">
              <div class="plan-description" v-html="plan.content"></div>
              <div class="plan-meta">
                <span class="meta-item">
                  <i class="el-icon-user"></i>
                  负责人：{{ plan.leader }}
                </span>
                <span class="meta-item">
                  <i class="el-icon-phone"></i>
                  联系方式：{{ plan.phone }}
                </span>
              </div>
            </div>

            <div class="plan-actions">
              <el-button 
                type="text" 
                icon="el-icon-refresh"
                @click="handleStatusChange(plan)"
              >{{ plan.status === 1 ? '标记完成' : '重新开始' }}</el-button>
              <el-button 
                type="text" 
                icon="el-icon-edit"
                @click="handleEditPlan(plan)"
              >编辑</el-button>
              <el-button 
                type="text" 
                icon="el-icon-delete"
                class="delete-btn"
                @click="handleDeletePlan(plan)"
              >删除</el-button>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>

    <!-- 添加/编辑计划对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form ref="planForm" :model="planForm" :rules="rules" label-width="100px">
        <el-form-item label="计划名称" prop="name">
          <el-input v-model="planForm.name" placeholder="请输入计划名称"/>
        </el-form-item>
        <el-form-item label="时间范围" prop="timeRange">
          <el-date-picker
            v-model="planForm.timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="负责人" prop="leader">
          <el-input v-model="planForm.leader" placeholder="请输入负责人姓名"/>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="planForm.phone" placeholder="请输入联系方式"/>
        </el-form-item>
        <el-form-item label="计划内容" prop="content">
          <editor v-model="planForm.content" :min-height="192" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitPlanForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Editor from '@/components/Editor'  // 引入富文本编辑器组件

export default {
  name: 'JhDetail',
  components: {
    Editor
  },
  data() {
    return {
      termId: null,
      termName: '',
      dialogVisible: false,
      dialogTitle: '',
      planForm: {},
      planList: [],
      rules: {
        name: [
          { required: true, message: '请输入计划名称', trigger: 'blur' }
        ],
        timeRange: [
          { required: true, message: '请选择时间范围', trigger: 'change' }
        ],
        leader: [
          { required: true, message: '请输入负责人', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系方式', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入计划内容', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    getOngoingCount() {
      return this.planList.filter(plan => plan.status === 1).length
    },
    getCompletedCount() {
      return this.planList.filter(plan => plan.status === 0).length
    }
  },
  created() {
    this.termId = this.$route.query.termId
    this.termName = this.$route.query.name
    this.getDetailData()
  },
  methods: {
    getDetailData() {
      // 这里应该调用后端接口获取数据
      // 暂时使用模拟数据
      this.planList = [
        {
          planId: 1,
          name: "新生训练周",
          startTime: "2024-03-01",
          endTime: "2024-03-07",
          leader: "张三",
          phone: "13800138000",
          content: "<h1>针对新入队队员进行基础训练，包括立正稍息、跨立、停止间转法等基本动作。</h1><br><hr><p>1. 立正稍息：</p><p>2. 跨立：</p><p>3. 停止间转法：</p> <br><p>4. 齐步走：</p><p>5. 正步走：</p><p>6. 跑步走：</p> ",
          status: 1
        },
        {
          planId: 2,
          name: "队列基础强化",
          startTime: "2024-03-08",
          endTime: "2024-03-15",
          leader: "李四",
          phone: "13800138001",
          content: "重点训练队列基本动作，包括齐步、正步、跑步等，确保动作规范统一。",
          status: 1
        },
        {
          planId: 3,
          name: "升旗仪式专项",
          startTime: "2024-03-16",
          endTime: "2024-03-31",
          leader: "王五",
          phone: "13800138002",
          content: "专项训练升旗仪式各个环节，包括持旗姿势、升旗动作要领、护旗队形变换等。",
          status: 0
        },
        {
          planId: 4,
          name: "体能强化周",
          startTime: "2024-04-01",
          endTime: "2024-04-15",
          leader: "赵六",
          phone: "13800138003",
          content: "通过晨跑、力量训练等形式全面提升队员体能水平，为后续训练打好基础。",
          status: 0
        },
        {
          planId: 5,
          name: "礼仪规范培训",
          startTime: "2024-04-16",
          endTime: "2024-04-30",
          leader: "孙七",
          phone: "13800138004",
          content: "开展礼仪培训，包括站姿、手势、表情等细节要求，提升仪式感。",
          status: 0
        },
        {
          planId: 6,
          name: "应急处置演练",
          startTime: "2024-05-01",
          endTime: "2024-05-15",
          leader: "周八",
          phone: "13800138005",
          content: "模拟各种突发情况的应对处置，提高队员临场应变能力。",
          status: 0
        },
        {
          planId: 7,
          name: "队列会操准备",
          startTime: "2024-05-16",
          endTime: "2024-05-31",
          leader: "吴九",
          phone: "13800138006",
          content: "针对即将举行的队列会操进行系统训练，包括队形变换、整体协调性等。",
          status: 0
        },
        {
          planId: 8,
          name: "汇报演出彩排",
          startTime: "2024-06-01",
          endTime: "2024-06-15",
          leader: "郑十",
          phone: "13800138007",
          content: "为建队20周年汇报演出进行彩排，展示训练成果。",
          status: 0
        }
      ]
    },
    goBack() {
      this.$router.go(-1)
    },
    getTimelineItemType(status) {
      return status === 1 ? 'primary' : 'success'
    },
    getPlanStatusType(status) {
      return status === 1 ? 'warning' : 'success'
    },
    getPlanStatusLabel(status) {
      return status === 1 ? '进行中' : '已完成'
    },
    handleAddPlan() {
      this.dialogTitle = '添加计划'
      this.planForm = {
        name: '',
        timeRange: [],
        leader: '',
        phone: '',
        content: ''
      }
      this.dialogVisible = true
    },
    handleEditPlan(plan) {
      this.dialogTitle = '编辑计划'
      this.planForm = {
        ...plan,
        timeRange: [plan.startTime, plan.endTime]
      }
      this.dialogVisible = true
    },
    handleDeletePlan(plan) {
      this.$confirm('确认删除该计划吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功')
        this.getDetailData()
      })
    },
    handleStatusChange(plan) {
      const newStatus = plan.status === 1 ? 0 : 1
      const actionText = newStatus === 0 ? '完成' : '重新开始'
      
      this.$confirm(`确认将该计划标记为${actionText}？`, '提示', {
        type: 'warning'
      }).then(() => {
        // 这里应该调用后端接口更新状态
        // 暂时直接修改前端数据
        plan.status = newStatus
        this.$message.success(`已将计划标记为${actionText}`)
      })
    },
    submitPlanForm() {
      this.$refs.planForm.validate(valid => {
        if (valid) {
          // 处理富文本内容
          const formData = {
            ...this.planForm,
            startTime: this.planForm.timeRange[0],
            endTime: this.planForm.timeRange[1],
            content: this.planForm.content // 富文本内容
          }
          
          // 这里应该调用后端接口保存数据
          console.log('提交的表单数据：', formData)
          
          this.$message.success('操作成功')
          this.dialogVisible = false
          this.getDetailData()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page-header {
  background: #fff;
  padding: 16px 24px;
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);

  .header-content {
    display: flex;
    align-items: center;

    .back-button {
      display: flex;
      align-items: center;
      cursor: pointer;
      color: #409EFF;
      margin-right: 20px;

      i {
        margin-right: 5px;
      }

      &:hover {
        opacity: 0.8;
      }
    }

    .title {
      margin: 0;
      font-size: 20px;
      color: #303133;
    }
  }
}

.overview-section {
  margin-bottom: 24px;
}

.overview-card {
  .card-content {
    display: flex;
    align-items: center;

    i {
      font-size: 48px;
      margin-right: 20px;
    }

    .info {
      .label {
        font-size: 14px;
        color: #909399;
        margin-bottom: 8px;
      }

      .value {
        font-size: 24px;
        font-weight: bold;
      }
    }
  }

  &.total i {
    color: #409EFF;
  }

  &.ongoing i {
    color: #E6A23C;
  }

  &.completed i {
    color: #67C23A;
  }
}

.timeline-card {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.plan-card {
  margin-bottom: 10px;
  transition: all 0.3s;

  &.completed-plan {
    opacity: 0.8;
  }

  .plan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

    h3 {
      margin: 0;
      font-size: 16px;
      color: #303133;
    }
  }

  .plan-content {
    .plan-description {
      color: #606266;
      line-height: 1.6;
      margin-bottom: 15px;
      
      // 富文本内容样式
      ::v-deep {
        p {
          margin: 0;
          line-height: 1.6;
        }
        
        img {
          max-width: 100%;
        }
        
        table {
          border-collapse: collapse;
          margin: 10px 0;
          
          td, th {
            border: 1px solid #dcdfe6;
            padding: 8px;
          }
        }
      }
    }

    .plan-meta {
      .meta-item {
        margin-right: 20px;
        color: #909399;
        font-size: 13px;

        i {
          margin-right: 5px;
        }
      }
    }
  }

  .plan-actions {
    margin-top: 15px;
    text-align: right;
    border-top: 1px solid #EBEEF5;
    padding-top: 15px;

    .delete-btn {
      color: #F56C6C;
    }
  }
}

.el-timeline-item {
  padding-bottom: 20px;
}

.plan-actions {
  .el-button {
    margin-left: 15px;
    
    &:first-child {
      margin-left: 0;
    }
  }
}
</style>
